<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Hand Coded SVG</title>
		<style>
			html,
			body {
				height: 100%;
				width: 100%;
				background: #e9e9e9;
			}
			
			body {
				margin: 0;
				text-align: center;
			}
			
			.grid {
				width: 750px;
				height: 500px;
				margin: 0 auto;
				padding-top: 100px;
				padding-left: 100px;
				background-image: url('./img/grid.png');
				position: relative;
			}
			
			.grid::before {
				content: "";
				border-left: 1px solid #7c7cea;
				position: absolute;
				top: 0;
				left: 100px;
				width: 750px;
				height: 600px;
			}
			
			.grid::after {
				content: "";
				border-top: 1px solid #7c7cea;
				position: absolute;
				top: 100px;
				left: 0;
				width: 850px;
				height: 500px;
			}
			
			svg {
				stroke: #000;
				stroke-width: 5;
				stroke-linecap: round;
				stroke-linejoin: round;
				fill: none;
			}
		</style>
	</head>

	<body>

		<div class="grid">
			<!--<svg width="750" height="500">
				<line x1="3" y1="3" x2="48" y2="3"></line>
				<line x1="3" y1="19" x2="65" y2="19"></line>
				<line x1="3" y1="35" x2="48" y2="35"></line>
				<line x1="3" y1="51" x2="65" y2="51"></line>
				<polyline points="
				  103 3
				  130 28
				  103 53
				"></polyline>
				<rect x="203" y="3" width="80" height="60"></rect>
				<line x1="203" y1="19" x2="283" y2="19"></line>
				<line x1="220" y1="3" x2="220" y2="17"></line>
				<ellipse cx="343" cy="43" rx="40" ry="40"></ellipse>
				<line x1="343" y1="23" x2="343" y2="50"></line>
				<ellipse style="fill:black;" cx="343" cy="63" rx="5" ry="5"></ellipse>
				<path d="
				  M 418 3
				  L 446 3
				  L 446 40
				  L 461 40
				  L 432 68
				  L 403 40
				  L 418 40
				  Z
				"></path>
			</svg>-->
			<svg width="750" height="500">
				<defs>
					<g id="leftalign">
						<!-- Left align icon made with lines -->
						<line x1="3" y1="3" x2="48" y2="3"></line>
						<line x1="3" y1="19" x2="65" y2="19"></line>
						<line x1="3" y1="35" x2="48" y2="35"></line>
						<line x1="3" y1="51" x2="65" y2="51"></line>
					</g>
					<g id="rightcaret">
						<!-- Right caret icon made with a polyline -->
						<polyline points="
				  3 3
				  30 28
				  3 53
				"></polyline>
					</g>
					<g id="browser">
						<!-- Browser icon made with rectangle and lines -->
						<rect x="3" y="3" width="80" height="60"></rect>
						<line x1="3" y1="19" x2="83" y2="19"></line>
						<line x1="20" y1="3" x2="20" y2="17"></line>
					</g>
					<symbol id="alert" viewBox="0 0 86 86">
						<!-- Alert icon made with ellipses and a line -->
						<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
						<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
						<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
					</symbol>
					<symbol id="play" viewBox="0 0 86 86">
						<!-- Play icon made with ellipse and polygon -->
						<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
						<polygon points="35 23, 60 43, 35 63" />
					</symbol>
					<symbol id="download" viewBox="0 0 64 71">
						<!-- Download icon made with path -->
						<path d="
				  M 18 3
				  L 46 3
				  L 46 40
				  L 61 40
				  L 32 68
				  L 3 40
				  L 18 40
				  Z
				"></path>
					</symbol>

				</defs>
				<use href="#leftalign" x="100" y="100"></use>
				<use href="#rightcaret" x="300" y="100"></use>

				<use href="#browser" x="500" y="100"></use>

				<use href="#alert" x="100" y="200" width="100" height="100"></use>

				<use href="#play" x="300" y="200" width="100" height="100"></use>

				<use href="#download" x="500" y="200" width="100" height="100"></use>

			</svg>
		</div>

	</body>

</html>